<template>
  <!-- 主容器 -->
  <div class="csign-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2 class="page-title">慢性病签约管理</h2>
      <div class="breadcrumb">首页 / 医生工作台 / 慢性病管理 / 签约管理</div>
    </div>
    
    <!-- 搜索过滤卡片 -->
    <div class="search-card">
      <div class="search-form">
        <div class="search-item">
          <label class="search-label">姓名</label>
          <el-input v-model="par.Name" placeholder="请输入患者姓名" class="input-search" prefix-icon="el-icon-user" clearable />
        </div>
        
        <div class="search-item">
          <label class="search-label">签约团队</label>
          <el-select v-model="par.CSignTeam"   placeholder="请选择签约团队" class="select-search" clearable >
            <el-option label="全科医生团队1" value="全科医生团队1" />
            <el-option label="全科医生团队2" value="全科医生团队2" />
            <el-option label="专科医生团队" value="专科医生团队" />
            <el-option label="慢病管理团队" value="慢病管理团队" />
          </el-select>
        </div>
        
        <div class="search-item">
          <label class="search-label">签约日期</label>
          <el-date-picker v-model="par.BeginTime" type="date" placeholder="开始日期" class="date-picker" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /> 
          <span class="date-separator">至</span>
          <el-date-picker  v-model="par.EndTime"  type="date"  placeholder="结束日期"  class="date-picker" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable />
        </div>
        
        <div class="search-actions">
          <el-button @click="ShowCsign" class="search-btn" > <i class="el-icon-search"></i> 查询  </el-button>

          <el-button   @click="clearCsign" class="reset-btn" > <i class="el-icon-refresh"></i> 重置  </el-button>

          <el-button   @click="OpenAddCsignList" class="add-sign-btn" > <i class="el-icon-plus"></i>  新增签约 </el-button>
        </div>
      </div>
    </div>

    <!-- 数据展示卡片 -->
    <div class="data-card">
      <!-- 数据统计和操作按钮 -->
      <div class="card-header">
        <el-button 
          @click="OpenAddCsignList"
          class="add-sign-btn"
        >
          <i class="el-icon-plus"></i>
          新增签约
        </el-button>
        
        <div class="stats-container">
          <div class="stat-item">
            <span class="stat-label">慢病患者总人数</span>
            <span class="stat-value">1234</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">高危患者</span>
            <span class="stat-value high-risk">34</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">中危患者</span>
            <span class="stat-value mid-risk">123</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">低危患者</span>
            <span class="stat-value low-risk">340</span>
          </div>
        </div>
      </div>
      
      <!-- 新增/调整签约弹窗 -->
    <SharedSignDialog 
      v-model:visible="UpCsignList"
      :dialog-type="currentPatientData.cSignId ? 'edit' : 'add'"
      :patient-data="currentPatientData"
      @success="handleUpdateSuccess"
    />
      
      <!-- 数据表格 -->
      <el-table 
        :data="tableData" 
        style="width: 100%"
        :row-class-name="tableRowClassName"
        empty-text="暂无数据"
      >
        <el-table-column prop="cSignId" label="序号" width="70" align="center" />
        <el-table-column prop="recordName" label="姓名" width="100" />
        <el-table-column prop="recordSex" label="性别" width="70" align="center">
          <template #default="scope">
            <el-tag 
              :type="parseSex(scope.row.recordSex) === '男' ? 'primary' : 'success'" 
              effect="light"
              class="sex-tag"
            >
              {{ parseSex(scope.row.recordSex) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="recordAge" label="年龄" width="80" align="center" />
        <el-table-column prop="recordPhone" label="联系电话" width="150" />
        <el-table-column prop="recordIdcard" label="身份证号" width="180">
          <template #default="scope"> 
            {{ maskIdcard(scope.row.recordIdcard) }}
          </template>
        </el-table-column>
        <el-table-column prop="cSignBegin" label="签约日期" width="150" align="center">
          <template #default="scope">
            {{ formatDate(scope.row.cSignBegin) }}
          </template>
        </el-table-column>
        <el-table-column prop="cSignEnd" label="结束日期" width="150" align="center">
          <template #default="scope">
            {{ formatDate(scope.row.cSignEnd) }}
          </template>
        </el-table-column>
        <el-table-column prop="cSignTeam" label="签约团队" width="170px" />
        <el-table-column label="操作" width="200" align="center">
          <template #default="scope">
            <el-button  @click="DelCsignInfo(scope.row.cSignId)" class="action-btn terminate-btn" plain >  解约 </el-button>

            <el-button  @click="handleAdjust(scope.row)" class="action-btn adjust-btn" plain > 调整 </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <el-pagination
        v-model:current-page="par.Pageindex"
        v-model:page-size="par.Pagesize"
        :page-sizes="[10, 20, 50, 100]"
        :total="par.totalCount"
        layout="total, sizes, prev, pager, next, jumper"
        :background="true"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        class="pagination-container"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import { ElMessage, ElMessageBox, type FormRules, type UploadProps } from 'element-plus';
import AddCS from '@/views/Doctors Desktop Version/ChronicSign/AddCSignview.vue';
import SharedSignDialog from '@/views/Doctors Desktop Version/ChronicSign/SharedSignDialog.vue';
import axios from 'axios';
import moment from 'moment';
import { Read, Write } from '@/Http/Axios';
import type { AnyObject } from 'ant-design-vue/es/_util/type';
import type { FormInstance } from 'ant-design-vue';



/**
 * 重置表单
 * @param formEl 表单实例
 */
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

/**
 * 处理解约操作
 * @param cSignId 签约ID
 */
const DelCsignInfo = (cSignId: any) => {
  ElMessageBox.confirm(
    '确认解约该患者吗？',
    '警告!',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      Write.delete('http://localhost:5203/api/Managment/DelCsign', { params: { cSignId: cSignId } }).then(() => {
        ElMessage.success('解约成功');
        ShowCsign();
      });
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '该操作已取消',
      });
    });
};

/**
 * 处理签约成功回调
 */
const handleUpdateSuccess = () => {
  // 隐藏对话框
  UpCsignList.value = false;
  // 重新加载数据
  ShowCsign();
  ElMessage.success('操作成功');
}

// 定义类型接口
interface PatientRecord {
  cSignId: number;
  recordName: string;
  recordSex: number | string;
  recordAge: number;
  recordPhone: string;
  recordIdcard: string;
  cSignBegin: string | Date;
  cSignEnd: string | Date;
  cSignTeam: string;
}

interface SearchParams {
  Pageindex: number;
  Pagesize: number;
  totalCount: number;
  totalPage: number;
  Name: string;
  BeginTime: string | Date | null;
  EndTime: string | Date | null;
  CSignTeam: string;
}

// 搜索参数
const par = reactive<SearchParams>({
  Pageindex: 1,
  Pagesize: 10,
  totalCount: 0,
  totalPage: 0,
  Name: '',
  BeginTime: null,
  EndTime: null,
  CSignTeam: '',
});

// 表格数据
const tableData = ref<PatientRecord[]>([]);

// 新增签约弹窗状态
const AddCsignList = ref(false);

// SharedSignDialog相关变量
const UpCsignList = ref(false); // 调整签约弹窗状态
const currentPatientData = ref<any>({}); // 当前操作的患者数据

// 表格头部样式已通过CSS设置

// 表格行样式
const tableRowClassName = ({ rowIndex }: { rowIndex: number }) => {
  return rowIndex % 2 === 0 ? 'table-row-even' : 'table-row-odd';
};

/**
 * 打开新增签约弹窗
 */
const OpenAddCsignList = () => {
  // 清空当前患者数据
  currentPatientData.value = {};
  // 显示新增签约对话框
  UpCsignList.value = true;
};

/**
 * 重置搜索条件
 */
const clearCsign = () => {
  par.Name = '';
  par.BeginTime = null;
  par.EndTime = null;
  par.CSignTeam = '';
  par.Pageindex = 1;
  ShowCsign();
};

/**
 * 格式化日期为YYYY/MM/DD
 * @param date 日期字符串或Date对象
 * @returns 格式化后的日期字符串
 */
const formatDate = (date: string | Date): string => {
  if (!date) return '-';
  try {
    return moment(date).format('YYYY/MM/DD');
  } catch (error) {
    console.error('日期格式化错误:', error);
    return '-';
  }
};

/**
 * 解析性别值
 * @param sex 性别值(1或'男'表示男，其他表示女)
 * @returns 性别文字
 */
const parseSex = (sex: number | string): string => {
  return (sex === 1 || sex === '男' || sex === '1') ? '男' : '女';
};

/**
 * 身份证号脱敏处理
 * @param idcard 身份证号
 * @returns 脱敏后的身份证号
 */
const maskIdcard = (idcard: string): string => {
  if (!idcard || idcard.length < 10) return idcard;
  return idcard.slice(0, 6) + '********' + idcard.slice(-4);
};


/**
 * 处理调整操作
 * @param row 当前行数据
 */
const handleAdjust = (row: PatientRecord) => {
  console.log('调整操作:', row);
  // 设置当前患者数据
  currentPatientData.value = row;
  // 显示调整签约对话框
  UpCsignList.value = true;
};
/**
 * 获取签约数据
 */
const ShowCsign = () => {
  // 创建请求参数，排除undefined和null值
  
  Read.get('http://localhost:5108/api/Manager/ShowCsign', { params: par })
    .then((response) => {
      // 确保响应数据结构正确
      if (response.data?.data?.data) {
        tableData.value = response.data.data.data;
        par.totalCount = response.data.data.totalCount || 0;
        par.totalPage = response.data.data.totalPage || 0;
      } else {
        // 数据结构不正确时显示模拟数据
        console.warn('API响应数据结构异常，显示模拟数据');
        tableData.value = getMockData();
        par.totalCount = 5;
      }
    })
    .catch((error) => {
      console.error('获取签约数据失败:', error);
      ElMessage.error('获取数据失败，请稍后重试');
      // API调用失败时显示模拟数据
      tableData.value = getMockData();
      par.totalCount = 5;
    });
};

/**
 * 处理分页大小变化
 */
const handleSizeChange = (val: number) => {
  par.Pagesize = val;
  ShowCsign();
};

/**
 * 处理当前页码变化
 */
const handleCurrentChange = (val: number) => {
  par.Pageindex = val;
  ShowCsign();
};

/**
 * 获取模拟数据（用于演示和API不可用时）
 */
const getMockData = (): PatientRecord[] => {
  return [
    {
      cSignId: 1,
      recordName: '张三',
      recordSex: 1,
      recordAge: 65,
      recordPhone: '13800138001',
      recordIdcard: '110101195501011234',
      cSignBegin: '2024-01-01',
      cSignEnd: '2025-01-01',
      cSignTeam: '沙河医院家庭医生'
    },
    {
      cSignId: 2,
      recordName: '李四',
      recordSex: 2,
      recordAge: 58,
      recordPhone: '13900139002',
      recordIdcard: '110102196502022345',
      cSignBegin: '2024-02-15',
      cSignEnd: '2025-02-15',
      cSignTeam: '社区卫生服务中心'
    },
    {
      cSignId: 3,
      recordName: '王五',
      recordSex: 1,
      recordAge: 72,
      recordPhone: '13700137003',
      recordIdcard: '110103195203033456',
      cSignBegin: '2024-01-10',
      cSignEnd: '2025-01-10',
      cSignTeam: '城市医院专家团队'
    },
    {
      cSignId: 4,
      recordName: '赵六',
      recordSex: 2,
      recordAge: 68,
      recordPhone: '13600136004',
      recordIdcard: '110104195604044567',
      cSignBegin: '2024-03-05',
      cSignEnd: '2025-03-05',
      cSignTeam: '沙河医院家庭医生'
    },
    {
      cSignId: 5,
      recordName: '钱七',
      recordSex: 1,
      recordAge: 60,
      recordPhone: '13500135005',
      recordIdcard: '110105196405055678',
      cSignBegin: '2024-02-20',
      cSignEnd: '2025-02-20',
      cSignTeam: '社区卫生服务中心'
    }
  ];
};

// 组件挂载时初始化数据
onMounted(() => {
  ShowCsign();
});
</script>

<style scoped>
/* 现代医疗系统设计风格 - 专业医疗蓝主题 */

/* 页面主容器 */
.csign-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
  background: linear-gradient(135deg, #f0f8ff 0%, #e6f2ff 100%);
  min-height: 100vh;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* 页面标题区域 - 玻璃拟态效果 */
.page-header {
  margin-bottom: 28px;
  padding: 20px 28px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 6px 24px rgba(31, 38, 135, 0.06);
  transition: all 0.3s ease;
}

.page-header:hover {
  box-shadow: 0 8px 30px rgba(31, 38, 135, 0.08);
}

.page-title {
  margin: 0 0 10px 0;
  font-size: 26px;
  font-weight: 700;
  color: #0056b3;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #0056b3, #007bff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.breadcrumb {
  font-size: 13px;
  color: #6c757d;
  font-weight: 500;
}

/* 搜索卡片 - 现代卡片设计 */
.search-card {
  background: white;
  border-radius: 14px;
  margin-bottom: 24px;
  border: 1px solid #e9ecef;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.search-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

/* 搜索表单布局 */
.search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding: 22px;
}

.search-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.search-label {
  font-size: 13px;
  color: #495057;
  font-weight: 600;
  white-space: nowrap;
  min-width: fit-content;
}

/* Element UI输入框样式覆盖 */
:deep(.el-input__inner) {
  border-radius: 8px !important;
  border: 1px solid #ced4da !important;
  transition: all 0.2s;
}

:deep(.el-input__inner:hover) {
  border-color: #007bff !important;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1) !important;
}

:deep(.el-input__inner:focus) {
  border-color: #0056b3 !important;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25) !important;
}

.date-picker {
  width: 160px;
}

.date-separator {
  color: #adb5bd;
  font-weight: 600;
  font-size: 13px;
  padding: 0 4px;
}

.select-search, .input-search {
  width: 220px;
}

:deep(.el-input__prefix-icon) {
  color: #adb5bd;
}

/* 搜索操作按钮组 */
.search-actions {
  display: flex;
  gap: 12px;
}

/* 按钮样式 - 现代化设计 */
.search-btn, .reset-btn, .add-sign-btn {
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.search-btn {
  background: linear-gradient(135deg, #0056b3 0%, #007bff 100%);
  color: white;
}

.search-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 123, 255, 0.35);
}

.reset-btn {
  background: #f8f9fa;
  color: #495057;
  border: 1px solid #dee2e6;
}

.reset-btn:hover {
  transform: translateY(-1px);
  background: #e9ecef;
  box-shadow: 0 4px 10px rgba(73, 80, 87, 0.15);
}

.add-sign-btn {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  color: white;
}

.add-sign-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(40, 167, 69, 0.35);
}

/* 数据卡片 - 高级卡片设计 */
.data-card {
  background: white;
  border-radius: 14px;
  border: 1px solid #e9ecef;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.data-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

/* 卡片头部 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 22px 16px;
  border-bottom: 1px solid #f1f3f4;
}

/* 统计数据容器 - 卡片式设计 */
.stats-container {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 10px 14px;
  border-radius: 8px;
  border-left: 3px solid #007bff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: all 0.2s;
  min-width: 140px;
}

.stat-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

.stat-label {
  font-size: 12px;
  color: #6c757d;
  font-weight: 500;
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.stat-value {
  font-size: 18px;
  font-weight: 700;
  color: #212529;
  line-height: 1.1;
  font-family: 'Segoe UI', system-ui, sans-serif;
}

/* 风险等级颜色 */
.stat-value.high-risk {
  color: #dc3545;
  text-shadow: 0 1px 1px rgba(220, 53, 69, 0.15);
}

.stat-value.mid-risk {
  color: #fd7e14;
  text-shadow: 0 1px 1px rgba(253, 126, 20, 0.15);
}

.stat-value.low-risk {
  color: #28a745;
  text-shadow: 0 1px 1px rgba(40, 167, 69, 0.15);
}

/* 风险等级统计卡片特殊样式 */
.stat-item:nth-child(2) {
  border-left-color: #dc3545;
}

.stat-item:nth-child(3) {
  border-left-color: #fd7e14;
}

.stat-item:nth-child(4) {
  border-left-color: #28a745;
}

/* 表格样式 */
:deep(.el-table) {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: none;
  border: 1px solid #f1f3f4;
  margin-top: 16px;
}

/* 表格头部样式 */
:deep(.el-table__header) {
  background: linear-gradient(135deg, #0056b3 0%, #007bff 100%);
}

:deep(.el-table__header th) {
  background: transparent !important;
  color: white;
  font-weight: 600;
  font-size: 13px;
  text-align: center;
  padding: 14px 8px;
  border-bottom: none;
}

/* 表格行样式 */
:deep(.el-table__body tr) {
  transition: all 0.2s;
}

:deep(.el-table__row:hover) {
  background-color: #f8faff !important;
  transform: scale(1.005);
}

.table-row-even {
  background-color: #ffffff;
}

.table-row-odd {
  background-color: #fafbfc;
}

/* 表格单元格样式 */
:deep(.el-table__body td) {
  padding: 14px 8px;
  border-bottom: 1px solid #f1f3f4;
  font-size: 13px;
  color: #495057;
  transition: all 0.2s;
}

/* 性别标签样式 */
.sex-tag {
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

/* 操作按钮组 */
.action-btn {
  margin: 0 4px;
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 6px;
  transition: all 0.2s;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 60px;
  justify-content: center;
}

.terminate-btn {
  border-color: #dc3545;
  color: #dc3545;
}

.terminate-btn:hover {
  background-color: #dc3545;
  color: white;
  box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3);
  transform: translateY(-1px);
}

.adjust-btn {
  border-color: #007bff;
  color: #007bff;
}

.adjust-btn:hover {
  background-color: #007bff;
  color: white;
  box-shadow: 0 2px 6px rgba(0, 123, 255, 0.3);
  transform: translateY(-1px);
}

.renew-btn {
  border-color: #28a745;
  color: #28a745;
}

.renew-btn:hover {
  background-color: #28a745;
  color: white;
  box-shadow: 0 2px 6px rgba(40, 167, 69, 0.3);
  transform: translateY(-1px);
}

/* 分页容器 */
.pagination-container {
  margin-top: 20px;
  padding: 16px 22px 20px;
  display: flex;
  justify-content: flex-end;
}

:deep(.el-pagination) {
  display: flex;
  align-items: center;
  gap: 8px;
}

:deep(.el-pagination.is-background .el-pager li:not(.disabled):hover) {
  color: #007bff;
  transform: translateY(-1px);
}

:deep(.el-pagination.is-background .el-pager li.active) {
  background: linear-gradient(135deg, #0056b3 0%, #007bff 100%);
  color: white;
  box-shadow: 0 2px 6px rgba(0, 123, 255, 0.3);
}

/* 弹窗样式 */
:deep(.el-dialog) {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  border: none;
}

:deep(.el-dialog__header) {
  background: linear-gradient(135deg, #0056b3 0%, #007bff 100%);
  color: white;
  padding: 18px 22px;
}

:deep(.el-dialog__title) {
  color: white;
  font-size: 16px;
  font-weight: 600;
}

:deep(.el-dialog__close) {
  color: white;
}

:deep(.el-dialog__close:hover) {
  color: #f8f9fa;
  background: rgba(255, 255, 255, 0.1);
}

/* 响应式设计 - 移动优先 */
@media (max-width: 1200px) {
  .csign-container {
    padding: 16px;
  }
  
  .search-form {
    justify-content: flex-start;
    gap: 16px;
  }
  
  .search-item {
    width: calc(50% - 8px);
    margin-bottom: 8px;
  }
  
  .select-search, .input-search {
    width: calc(100% - 50px);
    flex: 1;
  }
  
  .date-picker {
    width: calc(50% - 15px);
  }
  
  .search-actions {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
  }
  
  .stats-container {
    gap: 10px;
  }
  
  .stat-item {
    flex: 1;
    min-width: 120px;
    padding: 8px 12px;
  }
  
  .stat-value {
    font-size: 16px;
  }
  
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .stats-container {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 768px) {
  .csign-container {
    padding: 12px;
    background: white;
  }
  
  .page-header {
    padding: 16px;
    margin-bottom: 16px;
  }
  
  .page-title {
    font-size: 22px;
  }
  
  .search-form {
    padding: 16px;
    gap: 12px;
  }
  
  .search-item {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  
  .search-label {
    width: 100%;
  }
  
  .select-search, .input-search, .date-picker {
    width: 100%;
  }
  
  .stats-container {
    flex-direction: column;
    gap: 10px;
  }
  
  .stat-item {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  
  :deep(.el-table) {
    font-size: 12px;
  }
  
  :deep(.el-table__header th),
  :deep(.el-table__body td) {
    padding: 10px 4px;
  }
  
  .action-btn {
    margin: 2px;
    padding: 4px 8px;
    font-size: 11px;
    min-width: 50px;
  }
  
  .pagination-container {
    justify-content: center;
    padding: 12px;
  }
  
  :deep(.el-pagination) {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* 加载动画 */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

:deep(.el-loading-spinner .path) {
  stroke: #007bff;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f3f4;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #ced4da;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #adb5bd;
}
</style>